<template>
  <div>
    <h1>热门歌手</h1>
    <ul>
      <li v-for="item of artists" :key="item.id">
        <router-link
          :to="{
            name: 'artist',
            params: {
              id: item.id
            },
            query: {
              name: item.name
            }
          }"
        >
          <img width="80" :src="item.img1v1Url" :alt="item.name">
          <span>{{ item.name }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      artists: []
    }
  },
  created() {
    axios({
      url: 'http://localhost:3000/top/artists'
    }).then(res => {
      console.log(res.data)
      this.artists = res.data.artists
    })
  }
}
</script>

<!--<style>-->
<!-- scoped：css作用域，样式只在当前组件内生效 -->
<style scoped>
ul li {
  border-bottom: 1px solid #42b983;
  padding: 5px 0;
}

ul li a {
  display: flex;
  align-items: center;
}

ul li:first-child {
  border-top: 1px solid #42b983;
}
</style>
